@mixin button_style {
  padding: $btn_mobile_padding;
  font-size: $btn_mobile_font_size;
  font-weight: $btn_font_weight;
  border: none;
  outline: none;
  border-radius: $btn_border_radius_default;
  background: $gray;
  color: $white;
  transition: background $btn_transition_duration linear;
  margin-bottom: size(0.3125);
}

@mixin button_link_style {
  @include button_style;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  font-family: $sans-serif;
  text-decoration: none;

  &:hover {
    text-decoration: none;
  }
}

@mixin flat_btn_hover($shade_and_tint_color, $color) {   
  &:hover {
    background: tint($shade_and_tint_color, 9%);
    box-shadow: inset 0 0 3px 3px shade($shade_and_tint_color, 14%);
    color: $color;
  }
}

@mixin flat_btn_focus($shade_and_tint_color, $color) {  
  &:focus {
   box-shadow: 0 0 3px 4px shade($shade_and_tint_color, 9%);
   background: tint($shade_and_tint_color, 9%);
    color: $color;
  }
}
